<template>
  <view class="feedback-container">
    <!-- 问题描述 -->
    <view class="input-section">
      <textarea
        class="input-textarea"
        placeholder="请输入反馈的问题（5-500字以内）"
        maxlength="500"
        v-model="feedbackText"
      ></textarea>
    </view>

    <!-- 上传截图或照片 -->
    <view class="input-section">
      <text class="section-title">请提供问题的截图或照片（选填）</text>
      <view class="upload-section">
        <view class="upload-button" @click="uploadImage">
          <uni-icons type="plus" size="24" color="#999"></uni-icons>
          <text class="upload-text">上传图片</text>
        </view>
        <view class="image-preview" v-if="imageUrl">
          <image :src="imageUrl" class="preview-image" mode="aspectFill"></image>
          <view class="delete-button" @click="deleteImage">
            <uni-icons type="close" size="16" color="#fff"></uni-icons>
          </view>
        </view>
      </view>
    </view>

    <!-- 联系方式 -->
    <view class="input-section">
      <view class="phone-section">
        <text class="section-title">联系方式（选填）</text>
        <input
          class="input-field"
          type="number"
          placeholder="请输入手机号"
          v-model="phoneNumber"
        />
      </view>
    </view>

    <!-- 提示信息 -->
    <view class="tip-text">
      <text>您的反馈我们会尽快解决，但无法每一条都能及时反馈，请谅解，谢谢！</text>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      feedbackText: "", // 反馈问题内容
      imageUrl: "", // 上传的图片 URL
      phoneNumber: "", // 联系方式
    };
  },
  methods: {
    // 上传图片
    uploadImage() {
      uni.chooseImage({
        count: 1,
        success: (res) => {
          this.imageUrl = res.tempFilePaths[0];
        },
      });
    },

    // 删除图片
    deleteImage() {
      this.imageUrl = "";
    },

    // 提交反馈
    submitFeedback() {
      if (this.feedbackText.length < 5) {
        uni.showToast({
          title: "反馈问题至少需要5个字",
          icon: "none",
        });
        return;
      }

      // 提交逻辑
      const feedbackData = {
        feedbackText: this.feedbackText,
        imageUrl: this.imageUrl,
        phoneNumber: this.phoneNumber,
      };

      console.log("提交的反馈数据：", feedbackData);

      uni.showToast({
        title: "反馈提交成功",
        icon: "success",
      });

      // 清空表单
      this.feedbackText = "";
      this.imageUrl = "";
      this.phoneNumber = "";
    },
  },
};
</script>

<style scoped>
.feedback-container {
  padding: 20px;
  background-color: #f5f5f5;
}

/* 输入区域 */
.input-section {
  margin-bottom: 20px;
  padding: 20px;
  background: rgba(200, 201, 255, 0.13);
}

.section-title {
  font-size: 12px;
  color: #999;
}

.input-textarea {
  width: 100%;
  height: 150px;
  border-radius: 5px;
  font-size: 14px;
  color: #333;
  box-sizing: border-box;
}

/* 联系方式区域 */
.phone-section {
  display: flex;
  align-items: center;
}

.input-field {
  flex: 1;
  margin-left: 10px;
  border-radius: 5px;
  font-size: 12px;
  color: #999;
  box-sizing: border-box;
  text-align: right;
}

/* 上传图片区域 */
.upload-section {
  display: flex;
  align-items: center;
  padding-top: 10px;
  border-top: 1px solid #e3e3e3;
  margin-top: 10px;
}

.upload-button {
  width: 100px;
  height: 100px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  border: 1px dashed #ccc;
  border-radius: 5px;
  color: #999;
}

.upload-text {
  font-size: 12px;
  margin-top: 5px;
}

.image-preview {
  position: relative;
  margin-left: 10px;
}

.preview-image {
  width: 100px;
  height: 100px;
  border-radius: 5px;
}

.delete-button {
  position: absolute;
  top: -10px;
  right: -10px;
  width: 20px;
  height: 20px;
  background-color: #ff4d4f;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* 提示信息 */
.tip-text {
  margin-top: 20px;
  font-size: 10px;
  color: #999;
  text-align: left;
}
</style>